<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var airData = [{
            name: '北京',
            value: 39.92
        }, {
            name: '天津',
            value: 39.13
        }, {
            name: '上海',
            value: 31.22
        }, {
            name: '重庆',
            value: 66
        }, {
            name: '河北',
            value: 147
        }, {
            name: '河南',
            value: 113
        }, {
            name: '云南',
            value: 25.04
        }, {
            name: '辽宁',
            value: 50
        }, {
            name: '黑龙江',
            value: 114
        }, {
            name: '湖南',
            value: 175
        }, {
            name: '安徽',
            value: 117
        }, {
            name: '山东',
            value: 92
        }, {
            name: '新疆',
            value: 84
        }, {
            name: '江苏',
            value: 67
        }, {
            name: '浙江',
            value: 84
        }, {
            name: '江西',
            value: 96
        }, {
            name: '湖北',
            value: 273
        }, {
            name: '广西',
            value: 59
        }, {
            name: '甘肃',
            value: 99
        }, {
            name: '山西',
            value: 39
        }, {
            name: '内蒙古',
            value: 58
        }, {
            name: '陕西',
            value: 61
        }, {
            name: '吉林',
            value: 51
        }, {
            name: '福建',
            value: 29
        }, {
            name: '贵州',
            value: 71
        }, {
            name: '广东',
            value: 38
        }, {
            name: '青海',
            value: 57
        }, {
            name: '西藏',
            value: 24
        }, {
            name: '四川',
            value: 58
        }, {
            name: '宁夏',
            value: 52
        }, {
            name: '海南',
            value: 54
        }, {
            name: '台湾',
            value: 88
        }, {
            name: '香港',
            value: 66
        }, {
            name: '澳门',
            value: 77
        }, {
            name: '南海诸岛',
            value: 55
        }]
        var scatterData = [{
            value: [117.283042, 31.86119]
        }]
        var mCharts = echarts.init(document.querySelector("div"))
        $.get('china.json', function(ret) {
            // ret 就是中国的各个省份的矢量地图数据
            echarts.registerMap('chinaMap', ret)
            var option = {
                geo: {
                    type: "map",
                    map: 'chinaMap',
                    roam: true, // 设置允许缩放以及拖动的效果
                    label: {
                        show: true // 展示标签
                    }
                },
                series: [{
                    data: airData,
                    type: 'map',
                    geoIndex: 0
                }, {
                    data: scatterData,
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        scale: 10 // 设置涟漪动画的缩放比例
                    }
                }],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        color: ['white', 'red'] // 控制颜色渐变的范围
                    },
                    calculable: true // 出现滑块
                }
            }
            mCharts.setOption(option)
        })
    </script>
</body>

</html>